<template>
  <div>
    <Breadcrumb>
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>出库管理</BreadcrumbItem>
        <BreadcrumbItem>{{crumbBtn}}</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <div class="app-container">   
          <Form class="search" inline>
            <FormItem>
              <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
            </FormItem>
            <FormItem>
              <Button @click="reset">重置</Button>
            </FormItem>
          </Form>
          <Table border :columns="columns" :data="dataGrid"></Table>
      </div>
      <HigPager v-model="query" :total="pageTotal" :init="init"></HigPager>
    </Content>
    <Modal :footer-hide="true" fullscreen v-model="showDetail" title="退货单详情">
      <RefundInfo ref="refDetail" :orderItem="orderItem" :audit="audit" :callbank="eventAction"></RefundInfo>
    </Modal>
    <Modal :footer-hide="true" fullscreen v-model="showOutstock" title="退货出库">
      <Outstock ref="refOutstock" :orderItem="orderItem" :callbank="eventAction"></Outstock>
    </Modal>
    <Modal :footer-hide="true" fullscreen v-model="showInstock" title="退货入库">
      <Instock ref="refInstock" :goodsItem="orderItem" :callbank="eventAction"></Instock>
    </Modal>
  </div>
</template>
<script>
import RefundInfo from './info.vue'
import Outstock from './outstock.vue'
import Instock from '../../scm-warehouse-refund/shop-refund/instock.vue'
export default {
  name: "purchase",
  data() {
    return {
      crumbBtn: this.$store.getUser('userType') === 9 ? '分仓退货' : '退货出库',
      keywords: null,
      orderItem:{},
      showDetail: false,
      showOutstock: false,
      showInstock: false,
      audit: false,
      dataGrid:[],
      pageTotal:0,
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal:{
          refundType: 1
        }
      },
      columns: [
        {
          title: "退货单号",
          key: "scmRefundId",
          width: 190
        },
        {
          title: "店铺",
          key: "shopName",
        },
        {
          title: "退货金额",
          key: "refundAmt",
          sortable: true,
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),
              h("span", params.row.refundAmt.toFixed(2)),
            ])
          },
        },
        {
          title: "退货数量",
          key: "refundQty",
          sortable: true,
          width: 120,
        },
        {
          title: "当前状态",
          key: "refundText",
          width: 130,
          render: (h, params) => {
            return h("Tag", {
              props: {
                color: this.tagStyle(params.row.refundStatus)
              }
            }, params.row.refundText);
          },
        },
        {
          title: "退货原因",
          key: "refundReason",
        },
        {
          title: "创建时间",
          key: "postTime",
          sortable: true,
          width: 130,
          render: (h, params) => {
            return h("div", [
              h("span",this.$date(params.row.postTime,'yyyy-MM-dd')),
            ]);
          },
        },
        {
          title: '操作',
          key: 'action',
          width: '190',
          render: (h, params) => {
            return h('nav', this.operAction(h,params))
          }
        }
      ]
    }
  },
  created() {
    this.init()
  },
  components:{
    RefundInfo,
    Outstock,
    Instock
  },
  methods: {
    //搜索
    searchGet() {
      let sqlLike = {
        fields: ["shop_order_id", "scm_refund_id","shop_name","supplier_org_name","refund_reason"],
        keyword: this.keywords,
      };
      this.query.sqlLike = sqlLike;
      this.init();
    },
    //重置
    reset() {
      delete this.query.sqlLike;
      this.keywords = null;
      this.init();
    },
    detailModel(item) {
      this.orderItem = item
      this.showDetail = true
      this.$refs.refDetail.init(item.scmRefundId)
    },
    auditRefund(item) {
      this.orderItem = item
      this.showDetail = true
      this.audit = true
      this.$refs.refDetail.init(item.scmRefundId)
    },
    outstockModel(item) {
      this.orderItem = item;
      this.showOutstock = true;
      this.$refs.refOutstock.init(item.scmRefundId)
    },
    instockModel(item) {
      this.orderItem = item;
      this.showInstock = true;
      this.$refs.refInstock.init(item.scmRefundId)
    },
    eventAction() {
      this.showDetail = false
      this.showOutstock = false
      this.showInstock = false
      this.init()
    },
    init() {
      if(this.$store.getUser('userType') == 3) {
        //供应商
        this.query.equal.supplierOrgId = this.$store.getOrg('orgId')
      } else if(this.$store.getUser('userType') == 4) {
        //分仓
        this.query.equal.warehouseId = this.$store.getWms('warehouseId')
      }
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/refund/order/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list;
            data.forEach(element => {
              element.refundText = this.parseStatus(element.refundStatus)
            });
            this.dataGrid = data;
            this.pageTotal = res.data.data.count
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get()
    },
    parseStatus(id) {
      switch(id) {
        case 0:
          return '待审核'
        case 1:
          return '待退货'
        case 2:
          return this.$store.getUser('userType') === 9 ? '待入库' : '已出库'
        case 3:
          return '已完成'
        case 9:
          return '驳回'
      }
    },
    tagStyle(status) {
      switch(status) {
        case 0:
          return 'warning'
        case 1:
          return 'success'
        case 2:
          return 'primary'
        default:
          return 'magenta'
      }
    },
    operAction(h,params) {
      if(this.$store.getUser('userType') === 9) {
        return [
          h('Button', {
            props: {
              size: 'small'
            },
            on: {
              click: () => {
                this.detailModel(params.row)
              }
            }
          }, '详情'),
          h('Button', {
            props: {
              type: 'success',
              size: 'small',
              disabled: params.row.refundStatus !== 0
            },
            on: {
              click: () => {
                this.auditRefund(params.row)
              }
            }
          }, '审核'),
          h('Button', {
            props: {
              type: 'primary',
              size: 'small',
              disabled: params.row.refundStatus !== 2
            },
            on: {
              click: () => {
                this.instockModel(params.row)
              }
            }
          }, '入库')
        ]
      } else {
        return [
          h('Button', {
            props: {
              size: 'small'
            },
            on: {
              click: () => {
                this.detailModel(params.row)
              }
            }
          }, '详情'),
          h('Button', {
            props: {
              type: 'primary',
              size: 'small',
              disabled: params.row.refundStatus !== 1
            },
            on: {
              click: () => {
                this.outstockModel(params.row)
              }
            }
          }, '出库')
        ]
      }
    }
  }
}
</script>